<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0"/>

    <title>商品</title>

    <link href="/static/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="/static/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>

    <link href="/static/css/personal.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/orstyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/static/js/angular.js"></script>
</head>

<body>
<head th:include="header"/>
<div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">商品列表</strong> /
        <small>Items</small>
    </div>
</div>

<div ng-controller="createOrder">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="am-btn am-btn-warning" ng-click="createOrder()">批量下单
</button>
</div>

<div class="am-tabs am-tabs-d2 am-margin data-am-tabs">

    <div class="order-top">
        <div class="th td-select">
            <td class="td-inner">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        </div>
        <div class="th th-item" style="width: 300px;">
            <td class="td-inner">商品</td>
        </div>
        <div class="th th-price">
            <td class="td-inner">单价</td>
        </div>
        <div class="th th-number">
            <td class="td-inner">库存</td>
        </div>

        <div class="th th-operation">
            <td class="td-inner">购买数量</td>
        </div>

        <div class="th th-operation">
            <td class="td-inner">操作</td>
        </div>

    </div>
    <div ng-controller="itemList">
        <ul class="item-list" ng-repeat="item in items">
            <li class="th td-select" style="padding-top: 40px;">
                <label class="am-checkbox am-secondary">
                    <input type="checkbox" id="{{item.itemId}}" ng-true-value="true" ng-false-value="false"
                           ng-checked="isChecked(item.itemId)" ng-click="updateSelection($event,item)"
                    />
                </label>
            </li>
            <li class="td td-item" style="width: 300px;">
                <div class="item-pic">
                    <a href="#" class="J_MakePoint">
                        <img src="/static/images/bicycle.jpg" class="itempic J_ItemImg"/>
                    </a>
                </div>
                <div class="item-info">
                    <div class="item-basic-info">
                        <a href="#">
                            <p>{{item.itemName}}</p>
                        </a>
                    </div>
                </div>
            </li>
            <li class="td td-price">
                <div class="item-price">
                    {{item.itemPrice}}
                </div>
            </li>
            <li class="td td-number">
                <div class="item-number">
                    <span>{{item.itemStock}}</span>
                </div>
            </li>

            <li class="td th-operation">
                <div class="item-operation" style="margin-top: 23px;">
                    <input type="number" min="0" max="{{item.itemStock}}"
                           style="width: 100px;height: 30px;" value="1"/>
                </div>
            </li>

            <li class="td td-operation">
                <div class="item-operation">
                    <button type="button" class="am-btn am-btn-danger" ng-click="createOneOrder($event,item)">下单
                    </button>
                </div>
            </li>
        </ul>
    </div>
</div>

</body>
<script type="text/javascript">
    /*<![CDATA[*/
    var selected = [];
    var app = angular.module("myApp", []);
    console.log(app);
    app.controller("itemList", function ($scope, $http) {
        $http.get("/items").success(function (response) {
            $scope.items = response;
        });


        $scope.isChecked = function (id) {
            return selected.indexOf(id) >= 0;
        };

        $scope.updateSelection = function ($event, item) {
            var target = $event.target;
            var input = target.parentNode.parentNode.parentNode.getElementsByTagName("input")[1];
            var num = input.value;

            var orderItem = {
                itemId: item.itemId,
                itemNums: num == undefined || num == "" ? 1 : num,
                itemName: item.itemName,
                itemPrice: item.itemPrice,
                itemStock: item.itemStock
            };

            console.log(orderItem)

            var checkbox = $event.target;
            var checked = checkbox.checked;
            if (checked) {
                selected.push(orderItem);
            } else {
                var idx = selected.indexOf(orderItem);
                selected.splice(idx, 1);
            }
        };

        $scope.createOneOrder = function ($event, item) {
            var target = $event.target;
            var nums = target.parentNode.parentNode.parentNode.getElementsByTagName("input")[1].value;

            if (nums > item.itemStock) {
                alert(item.itemName + "库存不足");
                return;
            }
            var orderItem = {
                itemId: item.itemId,
                itemNums: nums,
                itemName: item.itemName,
                itemPrice: item.itemPrice
            };
            var orderItem = [orderItem];
            $http.post('/order',
                JSON.stringify(orderItem)
            ).success(function (response) {
                alert(response.message)
                $http.get("/items").success(function (response) {
                    $scope.items = response;
                });
            });

        }
    })


    app.controller('createOrder', function ($scope, $http) {

        $scope.createOrder = function () {

            var car = [];
            var flag = false;
            console.log(selected);
            for (var i = 0; i < selected.length; i++) {
                var item = selected[i];
                if (item.itemNums > item.itemStock) {
                    flag = true;
                    car.push(item.itemName);
                }
            }

            if (flag) {
                alert(JSON.stringify(car) + "库存不足,请重新下单");
                return;
            }

            var lenth = selected.length;

            if (!lenth) {
                alert("请选择！");
                return;
            }
            $http.post('/order',
                JSON.stringify(selected)
            ).success(function (response) {
                alert(response.message)
                document.location.reload();
            });
        }
    });

    /*]]>*/
</script>
</html>